<template>
  <div class="app">
    <div class="song-search">
      <el-input
        placeholder="搜索歌曲名称/歌手/专辑..."
        v-model="searchValue"
        class="search-form"
        size="small"
        @keydown="searchKeydown"
      >
        <template #append>
          <el-button  @click="searchSong"
            >搜索歌曲</el-button
          >
        </template>
      </el-input>
    </div>
    <div class="song-list">
      <el-table
        :data="songList"
        height="300px"
        stripe
        style="width: 100%"
        size="small"
        v-loading="isLoading"
      >
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button-group>
              <el-button
                size="mini"
                type="success"
                circle
                @click="addSong(scope.row)"
              >点</el-button>
              <el-button
                size="mini"
                type="warning"
                circle
                @click="playSong(scope.row)"
              >播</el-button>
            </el-button-group>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="歌曲"> </el-table-column>
        <el-table-column prop="artist" label="歌手"> </el-table-column>
        <el-table-column prop="album" label="专辑"> </el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="50"
        background
        :small="true"
        @current-change="pageChanged"
      >
      </el-pagination>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      isLoading: false,
      songList: [],
      searchValue: "周杰伦",
      total: 0,
      page: 1,
      room_id: false,
    };
  },
  watch: {
    "$store.state.roomInfo": {
      handler(roomInfo) {
        console.log(roomInfo);
        this.room_id = roomInfo ? roomInfo.room_id : false;
        console.log(this.room_id);
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    // this.$emit("api", {
    //   event: "setWindowTitle",
    //   title: "歌曲搜索",
    // });
  },
  methods: {
    searchKeydown(e) {
      if (e.key === "Enter") {
        this.page = 1;
        this.searchSong();
      }
    },
    addSong(song) {
      if (!this.room_id) {
        this.$message.error("你不在房间内,无法点歌");
        return;
      }
      this.request({
        url: "room/addSong",
        method: "POST",
        data: {
          room_id: this.room_id,
          mid: song.mid,
        },
      });
    },
    playSong(song) {
      if (this.room_id) {
        this.$message.error("你正在房间内,无法直接播放音乐");
        return;
      }
      this.$store.commit("playSong", song);
    },
    pageChanged(page) {
      this.page = page;
      this.searchSong();
    },
    searchSong() {
      this.isLoading = true;
      this.request({
        url: "song/search",
        method: "POST",
        data: {
          keyword: this.searchValue,
          page: this.page,
        },
        success: (res) => {
          this.songList = res.data.list;
          this.total = parseInt(res.data.total);
        },
        final: () => {
          this.isLoading = false;
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
.app {
  display: flex;
  flex: 1;
  width: 100%;
  color: #333;
  text-shadow: none;
  flex-direction: column;
  .song-search {
    padding: 10px;
  }
  .song-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    .el-table {
      flex: 1;
    }
    .el-pagination {
      padding: 10px;
      text-align: right;
    }
  }
}
</style>